import { AudioOutlined, CarOutlined } from '@ant-design/icons';
import {
    DrawerForm,
    ProFormInstance,

} from '@ant-design/pro-components';
import { Button, Card, Cascader, Descriptions, Space, Spin, message } from 'antd';
import { useRef, useState } from 'react';
interface DetailTravelArrangementsProps {
    detail: InterviewRecordData.TravelArrangements
}
const DetailTravelArrangements: React.FC<DetailTravelArrangementsProps> = ({ detail }) => {
    const formRef = useRef<ProFormInstance>();
    const [modalFormOpen, setModalFormOpenState] = useState<boolean>(false);

    const [detailTravelArrangements, setDetailTravelArrangements] = useState<InterviewRecordData.TravelArrangements>({
        leader: '黄绍强',
        phone: '13330239978',
        travelTime: '2024-6-21',
        address: '巴南区',
        PresentationTime: "2024-7-3",
        mediaList: [
            {
                mediaName: '重庆日报',
                reporterList: [{ name: '陈维灯', phone: '13330230752' }, { name: '谢智强', phone: '13330230752' }, { name: '崔力', phone: '13330230752' }]
            },
            {
                mediaName: '第1眼新闻',
                reporterList: [{ name: '梁昌豪', phone: '13330230752' }, { name: '康力为', phone: '13330230752' }]
            },
            {
                mediaName: '重庆之声',
                reporterList: [{ name: '林瑜', phone: '13330230752' }]
            },
            {
                mediaName: '华龙网',
                reporterList: [{ name: '陆丹', phone: '13330230752' }, { name: '张佳雯', phone: '13330230752' }]
            },
            {
                mediaName: '上游新闻',
                reporterList: [{ name: '谭柯', phone: '13330230752' }, { name: '任君', phone: '13330230752' }]
            },
            {
                mediaName: '重庆晚报',
                reporterList: [{ name: '蒋达弘', phone: '13330230752' }]
            },
            {
                mediaName: '重庆晨报',
                reporterList: [{ name: '杨新宇', phone: '13330230752' }]
            },
            {
                mediaName: '重庆法治',
                reporterList: [{ name: '舒楚寒', phone: '13330230752' }]
            },
        ],
        carsList: [{ number: '渝c.VX198', name: '某某司机', phone: '15230497320' }]
    })



    return (
        <>
            <DrawerForm
                trigger={<Button type='primary' size='small' style={{
                    background: '#87d068',
                }}>出行安排详情</Button>}
                title="出行安排详情"
                formRef={formRef}
                autoFocusFirstInput
                drawerProps={{
                    maskClosable: true,
                    destroyOnClose: true,
                    width: '45%',
                }}
                visible={modalFormOpen}
                onVisibleChange={setModalFormOpenState}
                submitTimeout={2000}
                submitter={false}
            >
                <Spin
                    style={{
                        textAlign: 'center',
                    }}
                    spinning={detailTravelArrangements === undefined}
                >
                    <Descriptions>
                        <Descriptions.Item label="带队人员">{detailTravelArrangements?.leader}</Descriptions.Item>
                        <Descriptions.Item label="联系电话">{detailTravelArrangements?.phone}</Descriptions.Item>
                        <Descriptions.Item label="集中采访时间">{detailTravelArrangements?.travelTime}</Descriptions.Item>
                        <Descriptions.Item label="采访地点">{detailTravelArrangements?.address}</Descriptions.Item>
                        <Descriptions.Item label="发布会时间">{detailTravelArrangements?.PresentationTime}</Descriptions.Item>
                    </Descriptions>
                    <Card bordered title={<><CarOutlined style={{ marginRight: 5 }} />车辆安排</>} style={{ marginTop: 20 }}>
                        {detailTravelArrangements?.carsList.map((item) =>
                            <Descriptions column={3}>
                                <Descriptions.Item label="车牌号">
                                    {item?.number}
                                </Descriptions.Item>
                                <Descriptions.Item label="司机">
                                    {item?.name}
                                </Descriptions.Item>
                                <Descriptions.Item label="电话">
                                    {item?.phone}
                                </Descriptions.Item>
                            </Descriptions>
                        )}
                    </Card>

                    <Card bordered title={<><AudioOutlined style={{ marginRight: 5 }} />采访媒体</>} style={{ marginTop: 20 }} >
                        {detailTravelArrangements?.mediaList.map((item) =>
                            <Descriptions title={item?.mediaName} column={2}>
                                {item.reporterList.map((item1) => <>
                                    <Descriptions.Item label="记者">
                                        {item1?.name}
                                    </Descriptions.Item>
                                    <Descriptions.Item label="电话">
                                        {item1?.phone}
                                    </Descriptions.Item></>
                                )}
                            </Descriptions>
                        )}
                    </Card>
                </Spin>
            </DrawerForm >
        </>
    );
};

export default DetailTravelArrangements;